// @unocss-include
import { $t } from '@/locales';

// YZJ-PRO 彩虹波浪动画函数
function createYzjProAnimation() {
    const className = `yzj-pro-loading`;
    const styleContent = `
/* 彩虹背景自然浪潮动画 - 从左往右流动 */
@keyframes rainbow-wave {
  0% {
    background-position: -100% 0%;
  }
  25% {
    background-position: -25% 30%;
  }
  50% {
    background-position: 50% 70%;
  }
  75% {
    background-position: 125% 20%;
  }
  100% {
    background-position: 200% 50%;
  }
}

/* 波浪曲线变形动画 */
@keyframes wave-distortion {
  0% {
    transform: skewX(0deg) scaleY(1);
  }
  20% {
    transform: skewX(2deg) scaleY(1.05);
  }
  40% {
    transform: skewX(-1deg) scaleY(0.98);
  }
  60% {
    transform: skewX(1.5deg) scaleY(1.02);
  }
  80% {
    transform: skewX(-0.5deg) scaleY(1.01);
  }
  100% {
    transform: skewX(0deg) scaleY(1);
  }
}

/* 字母从右侧进入并旋转的动画 */
@keyframes letter-enter {
  0% {
    transform: translateX(200px) rotate(0deg);
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    transform: translateX(0) rotate(-360deg);
    opacity: 1;
  }
}

/* 字母从中间向左滚动消失的动画 */
@keyframes letter-exit {
  0% {
    transform: translateX(0) rotate(0deg);
    opacity: 1;
  }
  80% {
    opacity: 1;
  }
  100% {
    transform: translateX(-300px) rotate(-360deg);
    opacity: 0;
  }
}

.yzj-pro-loading-wrap {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: 
    radial-gradient(ellipse at top, rgba(255,255,255,0.1) 0%, transparent 50%),
    linear-gradient(120deg, #ff0000, #ff7f00, #ffff00, #00ff00, #0000ff, #4b0082, #9400d3, #ff0000, #ff7f00),
    radial-gradient(ellipse at bottom, rgba(255,255,255,0.05) 0%, transparent 70%);
  background-size: 100% 100%, 600% 150%, 100% 100%;
  animation: 
    rainbow-wave 12s ease-in-out infinite,
    wave-distortion 8s ease-in-out infinite;
  z-index: 999;
  overflow: hidden;
}

.yzj-pro-loading-wrap::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(45deg, 
    transparent 20%, 
    rgba(255,255,255,0.1) 40%, 
    transparent 60%, 
    rgba(255,255,255,0.05) 80%, 
    transparent 100%);
  background-size: 200% 200%;
  animation: wave-overlay 15s ease-in-out infinite reverse;
  pointer-events: none;
}

/* 波浪叠加层动画 */
@keyframes wave-overlay {
  0% {
    background-position: -50% -50%;
    transform: rotate(0deg);
  }
  33% {
    background-position: 50% 150%;
    transform: rotate(1deg);
  }
  66% {
    background-position: 150% -50%;
    transform: rotate(-0.5deg);
  }
  100% {
    background-position: 250% 150%;
    transform: rotate(0deg);
  }
}

.${className} {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-family: 'Arial Black', Arial, sans-serif;
  font-size: 4rem;
  font-weight: bold;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}

.${className} .letter {
  color: white;
  opacity: 0;
  transform: translateX(200px);
  animation-fill-mode: forwards;
}

/* 入场动画 */
.${className}.entering .letter:nth-child(1) { animation: letter-enter 0.8s ease-out 0.1s forwards; }
.${className}.entering .letter:nth-child(2) { animation: letter-enter 0.8s ease-out 0.3s forwards; }
.${className}.entering .letter:nth-child(3) { animation: letter-enter 0.8s ease-out 0.5s forwards; }
.${className}.entering .letter:nth-child(4) { animation: letter-enter 0.8s ease-out 0.7s forwards; }
.${className}.entering .letter:nth-child(5) { animation: letter-enter 0.8s ease-out 0.9s forwards; }
.${className}.entering .letter:nth-child(6) { animation: letter-enter 0.8s ease-out 1.1s forwards; }
.${className}.entering .letter:nth-child(7) { animation: letter-enter 0.8s ease-out 1.3s forwards; }

/* 退场动画 */
.${className}.exiting .letter:nth-child(1) { animation: letter-exit 0.8s ease-in 0.1s forwards; }
.${className}.exiting .letter:nth-child(2) { animation: letter-exit 0.8s ease-in 0.3s forwards; }
.${className}.exiting .letter:nth-child(3) { animation: letter-exit 0.8s ease-in 0.5s forwards; }
.${className}.exiting .letter:nth-child(4) { animation: letter-exit 0.8s ease-in 0.7s forwards; }
.${className}.exiting .letter:nth-child(5) { animation: letter-exit 0.8s ease-in 0.9s forwards; }
.${className}.exiting .letter:nth-child(6) { animation: letter-exit 0.8s ease-in 1.1s forwards; }
.${className}.exiting .letter:nth-child(7) { animation: letter-exit 0.8s ease-in 1.3s forwards; }

/* 等待状态时的轻微浮动效果 */
.${className}.waiting .letter {
  animation: none;
  opacity: 1;
  transform: translateX(0) rotate(0deg);
}

/* 退场状态初始设置 */
.${className}.exiting .letter {
  opacity: 1;
  transform: translateX(0) rotate(0deg);
}

@keyframes float {
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-10px); }
}

.${className}.waiting .letter:nth-child(1) { animation: float 2s ease-in-out 0.1s infinite; }
.${className}.waiting .letter:nth-child(2) { animation: float 2s ease-in-out 0.3s infinite; }
.${className}.waiting .letter:nth-child(3) { animation: float 2s ease-in-out 0.5s infinite; }
.${className}.waiting .letter:nth-child(4) { animation: float 2s ease-in-out 0.7s infinite; }
.${className}.waiting .letter:nth-child(5) { animation: float 2s ease-in-out 0.9s infinite; }
.${className}.waiting .letter:nth-child(6) { animation: float 2s ease-in-out 1.1s infinite; }
.${className}.waiting .letter:nth-child(7) { animation: float 2s ease-in-out 1.3s infinite; }
  `;

    let animationCycle: number;
    let isAnimating = false;

    function startAnimationCycle() {
        if (isAnimating) return;
        isAnimating = true;

        const textElement = document.getElementById('yzj-pro-text');
        if (!textElement) return;

        // 开始入场动画
        textElement.className = `${className} entering`;

        // 2秒后切换到等待状态（所有字母都已进入）
        setTimeout(() => {
            textElement.className = `${className} waiting`;

            // 7秒等待后开始退场动画
            setTimeout(() => {
                textElement.className = `${className} exiting`;

                // 退场动画完成后重新开始循环
                setTimeout(() => {
                    isAnimating = false;
                    animationCycle = requestAnimationFrame(startAnimationCycle);
                }, 2500); // 退场动画持续时间（0.8s动画 + 1.3s延迟 + 0.4s缓冲）
            }, 7000); // 等待7秒
        }, 2000); // 入场动画持续时间
    }

    return {
        styleContent,
        className,
        startAnimationCycle,
        stopAnimation: () => {
            if (animationCycle) {
                cancelAnimationFrame(animationCycle);
            }
            isAnimating = false;
        }
    };
}

// 判断是否在Electron环境中
const isElectron = typeof window !== 'undefined' && (window as any).ipcRenderer !== undefined;

// 进度条移动相关参数
export function setupLoading() {
    // 在Electron环境中跳过加载，因为会有独立的加载窗口
    if (isElectron) {
        console.log('在Electron环境中，跳过Web加载动画');
        return {
            stopAnimation: () => {},
            removeLoading: () => {}
        };
    }

    const title = $t('system.title');

    document.title = title;

    // 创建YZJ-PRO动画
    const yzjAnimation = createYzjProAnimation();

    // 添加样式到页面
    const styleElement = document.createElement('style');
    styleElement.id = 'yzj-pro-loading-style';
    styleElement.innerHTML = yzjAnimation.styleContent;
    document.head.appendChild(styleElement);

    // 创建YZJ-PRO加载动画HTML
    const yzjProLoading = `
    <div class="yzj-pro-loading-wrap">
      <div class="${yzjAnimation.className} entering" id="yzj-pro-text">
        <span class="letter">Y</span>
        <span class="letter">Z</span>
        <span class="letter">J</span>
        <span class="letter">-</span>
        <span class="letter">P</span>
        <span class="letter">R</span>
        <span class="letter">O</span>
      </div>
    </div>
  `;

    const app = document.getElementById('app');
    if (app) {
        app.innerHTML = yzjProLoading;
        // 启动YZJ-PRO动画循环
        setTimeout(yzjAnimation.startAnimationCycle, 100);
    }

    // 返回停止动画的函数，供外部调用
    return {
        stopAnimation: yzjAnimation.stopAnimation,
        removeLoading: () => {
            // 移除样式
            const style = document.getElementById('yzj-pro-loading-style');
            if (style) {
                style.remove();
            }
            // 停止动画
            yzjAnimation.stopAnimation();
            // 清空应用内容
            if (app) {
                app.innerHTML = '';
            }
        }
    };
}
